<!-- 房屋管理 -->
<template>
  <div>
    <div class="header">
      <a-card :title="title">
        <template #extra><a href="#/dangermanager/zcdanger">返回上一页</a></template>

        <div class="card-container">
          <div style="width: 40%">
            <a-input-search
              v-model:value="txtKeyWord"
              placeholder="请输入户主姓名、地址或房屋编号进行查询"
              enter-button
              style="width: 100%"
              @search="onSearch"
            />
          </div>
          <a-space style="float: right; margin-right: 10px">
            <a-button type="primary" @click="handleHoustDetailExport"> 导出全部</a-button>
          </a-space>
          <a-table
            :columns="computedTableColumn"
            :data-source="computedCheckTableDataList"
            :page-size-options="pageSizeOptions"
            :loading="loading"
            bordered
            :pagination="false"
            size="middle"
            :scroll="{ x: 'calc(700px + 50%)', y: tableHeight }"
          />
          <div class="pagination">
            <a-pagination
              show-size-changer
              v-model:current="pageIndex"
              v-model:pageSize="pageSize"
              :total="total"
              @show-size-change="onShowSizeChange"
            />
          </div>
        </div>
      </a-card>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted, onBeforeMount, computed, watch } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useUserStore } from '/@/store/modules/user';
  import { getDetailYhList } from '/@/api/demo/system';
  import { useGlobSetting } from '/@/hooks/setting';
  import { downloadByUrl } from '/@/utils/file/download';
  let userInfo = ref<any>(null);
  let detailTableHeight = ref<number>(0); // 表格高度
  let tableHeight = ref<number>(200); // 表格高度
  let pageIndex = ref(1);
  let pageSize = ref(15);
  const txtKeyWord = ref(''); //关键字
  let loading = ref(false);
  const pageSizeOptions = ref<string[]>(['100', '200', '300']);
  const userStore = useUserStore();
  const globSetting = useGlobSetting();
  //  调用 父组件传过来的方法

  // 使用 useRouter 创建一个 router 实例
  const route = useRoute();
  const router = useRouter();
  const { xzq, xzqdm, groupbyLever_code, check_name, groupbyLever_code_project, check_id, type } =
    route.query;
  const title = xzq + '-' + '隐患项：【' + check_name + '】';
  let TableSource = ref<any>([]);
  let total = ref(0);
  const columns = [
    { title: '序号', width: 80, dataIndex: 'index', key: 'index', align: 'center', fixed: 'left' },
    {
      title: '区县名称',
      dataIndex: 'xzq',
      key: 'xzq',
      align: 'center',
      width: 170,
    },
    {
      title: '乡镇名称',
      dataIndex: 'town',
      key: 'town',
      align: 'center',
      width: 170,
    },
    {
      title: '村级名称',
      dataIndex: 'village',
      key: 'village',
      align: 'center',
      width: 170,
      scopedSlots: { customRender: 'village' },
      ellipsis: true, //需ant版本为1.5及以上
    },
    // 居住 商业
    {
      title: '户主姓名',
      dataIndex: 'hzxm',
      key: 'hzxm',
      align: 'center',
      width: 170,
      scopedSlots: { customRender: 'hzxm' },
      ellipsis: true, //需ant版本为1.5及以上
    },
    // 居住 商业
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
      align: 'center',
      width: 250,
      scopedSlots: { customRender: 'address' },
      ellipsis: true, //需ant版本为1.5及以上
    },
    //  商业
    {
      title: '房屋编号',
      dataIndex: 'fwbh',
      key: 'fwbh',
      align: 'center',
      width: 170,
      customCell: (row, index, column) => {
        let isNoHzyh = row.town !== '汇总' ? true : false;
        let style = 'cursor:pointer;text-decoration: underline; color: blue;';
        return {
          style: style,
          class: 'cell-hover',
          onClick: async () => {
            getDetailData(row);
          },
        };
      },
    },
    {
      title: '整改状态',
      dataIndex: 'zgzt',
      key: 'zgzt',
      align: 'center',
      width: 170,
      scopedSlots: { customRender: 'zgzt' },
      ellipsis: true, //需ant版本为1.5及以上
      customCell: (row, index, column) => {
        let style = '';
        if (row.zgzt == '已整改') {
          style = 'color: green;';
        } else if (row.zgzt == '未整改') {
          style = 'color: red;';
        } else {
          style = 'color: #000;';
        }
        return {
          style: style,
        };
      },
    },
  ];
  // 计算属性，用于实时更新数据到页面上
  const computedTableColumn = computed(() => {
    let newColumn: any = [];
    newColumn = columns;
    return newColumn;
  });
  const computedCheckTableDataList = computed(() => {
    return TableSource.value;
  });

  function getUserInfo() {
    const userStore = useUserStore();
    userInfo.value = userStore?.getUserInfo;
  }

  const getRecordTableData = async () => {
    let params: any = {
      pageIndex: pageIndex.value,
      pageSize: pageSize.value,
      xzqdm: xzqdm,
      groupbyLever_code: groupbyLever_code,
      groupbyLever_code_project: groupbyLever_code_project,
      type: type,
      check_id: check_id,
      txtKeyWord: txtKeyWord.value,
    };
    console.log('**********params***********', params);

    loading.value = true;
    let res = await getDetailYhList(params);
    loading.value = false;
    let list = res.items;
    TableSource.value = list;
    total.value = res.total;
  };
  //导出
  function handleHoustDetailExport() {
    const uriBase = `${globSetting.apiBaseUrl}${globSetting.apiUrl}`;
    const tk = userStore.getToken;
    downloadByUrl({
      url:
        uriBase +
        '/houses/export/zcyhHourseExport?access_token=' +
        tk +
        '&type=' +
        type +
        '&check_id=' +
        check_id +
        '&xzqdm=' +
        xzqdm,
      target: '_blank',
    });
  }
  //  搜索事件
  const onSearch = () => {
    getRecordTableData();
  };
  //根据房屋编号获取详细信息
  const getDetailData = async (row: any) => {
    console.log('=========================================', row);
    router.push({
      path: '/utils/houseCheckLog',
      query: {
        xzq: row.xzq,
        town: row.town,
        village: row.village,
        hzxm: row.hzxm,
        fwbh: row.fwbh,
      },
    });
    console.log('=========================================', router);
  };

  const onShowSizeChange = (pageIndex: number, pageSize: number) => {
    // antDesign  自动给  pageIndex 和 pageSize 赋值
    //  pageIndex.value = pageIndex;
    //  pageSize.value = pageSize;
    // console.log('@pageIndex,pageSize', pageIndex, pageSize);
  };
  const getTableHeight = () => {
    setTimeout(() => {
      detailTableHeight.value = window.innerHeight;
      tableHeight.value = window.innerHeight + 250;
    });
  };
  watch(pageSize, () => {
    console.log('pageSize', pageSize.value);
    //getData();
  });
  watch(pageIndex, () => {
    console.log('current', pageIndex.value);
    getRecordTableData();
    //getData();
  });
  onBeforeMount(() => {
    getUserInfo();
  });
  onMounted(() => {
    console.log('******房屋自查、核查记录******');
    getRecordTableData();
    getTableHeight();
    // getTableData();
  });
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  #map {
    height: calc(100vh - 140px);
  }
  .col-sql {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .x-houseMng-search {
    z-index: 100;
    margin: 6px;
    position: absolute;
  }

  .root-house-mng-main {
    margin: 6px;
  }

  .x-village-tabs {
    //z-index: 100;
    //position: absolute;
    width: 60vw;
    margin-top: 6px;
    margin-left: 40px;
    //background-color: rgba(34, 34, 34, 0.6);
    :deep(.ant-form) {
      margin-top: 6px;
    }

    // :deep(.ant-form-item-label) > label {
    //   color: white;
    // }
  }
</style>
